Related Issue

Closes #704

Summary

Updated authentication UI by adding sliding panel, sliding animations between Sign-In and Sign-Up panels. And added Google and Notion login shortcuts.

Changes Made

• Created a 768px wide split layout with a sliding white panel.
• When a user clicks SIGN UP or LOG IN on the dark panels, the white form panel smoothly slides left or right using CSS transform: translateX and CSS transitions to provide a completely latency-free animation.
• Both forms were updated to match the existing theme variables (colors, borders, fonts).
• I updated the Javascript logic so that if a user accidentally starts typing their email and password into the Login form and then clicks the "SIGN UP" button to slide the panel, the values they typed are seamlessly copied over to the Sign Up form (and vice versa) so they don't have to re-enter their information.
• Added new "Log in with Google" and "Log in with Notion" buttons on both the Sign Up and Log In forms
• For now, Mock Endpoints, clicking the buttons will immediately simulate a successful OAuth response and log in using a mock user (user@google.com or user@notion.so), creating a session so you can enter the application immediately.
• Bridging between 2-3 different application, helps transfer info between them, enhancing productivity of overall system. Enhances System Architecture and droves many Users from other application to this.

Testing

1. UI updates are manually tested, resulting in smoother and seamless animations.
2. No latency in rendering and updating user information input.
3. Designs relay on existing design, which makes UI cleaner.
4. Client OAuth keys to be added by author to make Google and Notion shortcut login work functionally.

Screenshots

Before updates -

After updates -

Checklist

• Set up sliding panel for Auth Modal.
• Added CSS animations for sliding panel, relevant design structure with existing one.
• Added mock Google and Notion login endpoints in backend.
• Verified animations and login functionality.